<template>
  <el-container>
    <el-header></el-header>
    <el-main>
      <el-row>
        <el-col :span="8">
            <img :src='imgUrl' class="leftimg">
        </el-col>
        <el-col :span="16">
          <div class="rightlogin">
            <el-input v-model="username" placeholder="请输入账号"></el-input>
            <el-input v-model="password" placeholder="请输入密码" type="password"></el-input>
            <el-checkbox v-model="remember">记住密码</el-checkbox>
            <div class="clear"><el-button type="primary" @click="login" native-type="button">进入管理中心</el-button></div>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
    export default {
        name: "Login",
        data () {
          return　{
            imgUrl:'../static/images/login.png',
            username : '',
            password : '',
            remember : true
          }
        },
        methods:{
          login: function (){
            var username = this.username
            var password = this.password
            if(username.length == 0 || password.length == 0){
              this.$message('用户名/密码不能为空!');
              return false
            }
            this.$message('用户名是'+username+'密码是'+password);
          }
        },
    }
</script>

<style>
body {background: #278296}
.leftimg { width: 100%}
.clear {clear:both; margin-top: 0.6rem}
.rightlogin { margin: 1em 0 0 1.2rem}
.el-input {margin-bottom: 0.8rem}
.el-checkbox {color: #fff}
.el-checkbox__input.is-checked+.el-checkbox__label {color: #fff}
</style>
